<template>
<div id="MenDian">
  <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
    <div class="tongji-box" v-for="(item, index) in list" :key="index">
      <div class="tongji-item">
        <div class="tongji-row">
          <div>门店名称：</div>
          <div class="ft-blue" style="font-size: 0.32rem;">{{ item.shopName }}</div>
        </div>
        <div class="tongji-row">
          <div>租借人次：</div>
          <div>{{ item.leaseNumber }}次</div>
        </div>
        <div class="tongji-row">
          <div>总金额：</div>
          <div class="ft-org">{{ item.totalFee }}元</div>
        </div>
        <div class="tongji-row">
          <div>分成金额：</div>
          <div class="ft-org">{{ item.proportionMoney || '0' }}元</div>
        </div>
      </div>
    </div>
  </van-list>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class MenDian extends Vue {

  list: any = []

  loading: boolean = false
  finished: boolean = false
  page: any = 1
  searchValue: any = ''

  search(value: string) {
    this.searchValue = value;
    this.page = 1
    this.list = [];
    this.getList();
  }
  getList() {
    this.loading = true;
    let page = this.page, size = 10, vague = 0, userId = this.$store.state.userInfo.userId, fuzzy = this.searchValue; 
    axios.get('/api/chargerPlaEquipmentController/getLeaseStatistics', { 
      page, size, vague, userId, fuzzy
    }).then((res: any) => {
      let json = res || {};
      if(json.isLastPage) this.finished = true;
      this.loading = false;
      let arr = json.list || [];
      this.page = this.page + 1;
      this.list = [ ...this.list, ...arr ];
    }).catch((err: any) => {
      this.loading = false;
      this.finished = true;
    });
  }

  mounted() {
    this.getList();
  }
  
};
</script>

<style lang="scss">
#MenDian {
}
</style>

